/**color**/
.color-danger {
  color: #ff6666;
}

.color-primary {
  color: #026141;
}
.color-main {
  color: #2a61ff;
}

.color-success {
  color: #67c23a;
}

.color-warning {
  color: #e6a23c;
}

.color-ignore {
  color: #bdbdbd;
}

.color-yellow {
  color: rgb(232, 149, 46);
}
.color-grey {
  color: #666;
}
.color-light {
  color: #999;
}
.color-dark {
  color: #333;
}
.color-white {
  color: #fff;
}
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}
.text-bold {
  font-weight: bold;
}
.line-height_22 {
  line-height: 22px;
}

/****flex****/
.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-between-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.flex-between-end {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.flex-between-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex-between-baseline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-start-top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-start-end {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.flex-start-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.flex-start-top-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.flex-center-column {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.flex-center-end-column {
  display: flex;
  justify-content: center;
  align-items: end;
  flex-direction: column;
}
.flex-between-column {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
}

/**space**/
.m-xs {
  margin: 10px;
}

.m-sm {
  margin: 20px;
}

.m-md {
  margin: 30px;
}

.m-lg {
  margin: 40px;
}

.m-b-xxs {
  margin-bottom: 5px;
}
.m-b-xs {
  margin-bottom: 10px;
}

.m-b-sm {
  margin-bottom: 20px;
}

.m-b {
  margin-bottom: 30px;
}

.m-b-lg {
  margin-bottom: 40px;
}

.m-r-xs {
  margin-right: 10px;
}

.m-r-sm {
  margin-right: 20px;
}

.m-r {
  margin-right: 30px;
}

.m-r-lg {
  margin-right: 40px;
}

.m-l-xxs {
  margin-left: 5px;
}
.m-l-xs {
  margin-left: 10px;
}

.m-l-sm {
  margin-left: 20px;
}

.m-l {
  margin-left: 30px;
}

.m-l-lg {
  margin-left: 40px;
}

.m-t-xxs {
  margin-top: 5px;
}
.m-t-xs {
  margin-top: 10px;
}

.m-t-sm {
  margin-top: 20px;
}

.m-t {
  margin-top: 30px;
}

.m-t-lg {
  margin-top: 40px;
}

.p-xs {
  padding: 10px;
}

.p-sm {
  padding: 20px;
}

.p-md {
  padding: 30px;
}

.p-lg {
  padding: 40px;
}

.p-b-xs {
  padding-bottom: 10px;
}

.p-b-sm {
  padding-bottom: 20px;
}

.p-b {
  padding-bottom: 30px;
}

.p-b-lg {
  padding-bottom: 40px;
}

.p-t-xxs {
  padding-top: 5px;
}
.p-t-xs {
  padding-top: 10px;
}

.p-t-sm {
  padding-top: 20px;
}

.p-t {
  padding-top: 30px;
}

.p-t-lg {
  padding-top: 40px;
}

.p-r-xxs {
  padding-right: 5px;
}
.p-r-xs {
  padding-right: 10px;
}

.p-r-sm {
  padding-right: 20px;
}

.p-r {
  padding-right: 30px;
}

.p-r-lg {
  padding-right: 40px;
}

.p-l-xs {
  padding-left: 10px;
}

.p-l-sm {
  padding-left: 20px;
}

.p-l {
  padding-left: 30px;
}

.p-l-lg {
  padding-left: 40px;
}

/**other**/
.relative {
  position: relative;
}
/*清除浮动*/
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

/************* 列表 ******************/ 
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
}
.fixed-top2{
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
}
.list-wrap {
  padding: 10px;
  background-color: #fff;
  // border: 1px solid rgba(233, 233, 233, 0.3);
  box-shadow: 2px 2px 10px #eee;
  line-height: 28px;
  font-size: 14px;
  border-radius: 6px;
  margin: 10px;
  .img-icon {
    width: 70px;
    height: 70px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    flex-shrink: 0;
    img{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  
  .title {
    font-size: 16px;
    font-weight: 600;
    flex: 1;
  }
  .lable {
    color: #666;
    flex-shrink: 0;
  }
  .value {
    color: #999;
  }
}
.line {
  border-bottom: 1px solid #ddd;
  margin-bottom: 8px;
  padding-bottom: 5px;
}
.rank-wrap {
  width: 28px;
  height: 28px;
  display: inline-flex;
  .rank-bg {
    border-radius: 50%;
    background-color: #eee;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
  }
}